<template>
<!--放大镜图-->
  <div class="goods_info_top_left">
    <div class="goods-image">
      <!-- 左侧大图-->
      <div class="middle" ref="target">
        <img :src="imageList[activeIndex]" alt="" />
        <!-- 蒙层小滑块 -->
        <div class="layer" v-show="!isOutside" :style="{ left: `${left}px`, top: `${top}px` }"></div>
      </div>
      <!-- 小图列表 -->
      <ul class="small">
        <li v-for="(img, i) in imageList" :key="i" @mouseenter="enterHandle(i)" :class="{active: i===activeIndex}">
          <img :src="img" alt="" />
        </li>
      </ul>
      <!-- 放大镜大图 -->
      <div class="large" :style="[
      {
        backgroundImage: `url(${imageList[activeIndex]})`,
        backgroundPositionX: `${positionX}px`,
        backgroundPositionY: `${positionY}px`,
      },
    ]" v-show="!isOutside">
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { useMouseInElement } from '@vueuse/core'

const activeIndex = ref(0) //小图切大图显示
const target = ref(null)
const { elementX, elementY, isOutside } = useMouseInElement(target)
const left = ref(0)
const top = ref(0)
const positionX = ref(0)
const positionY = ref(0)

defineProps({
  imageList: {
    type: Array,
    default: () => []
  }
})
/*小图切换大图显示*/
const enterHandle = (i: number) => {
  activeIndex.value = i
}
/*获取鼠标相对位置*/
watch([elementX, elementY], () => {
  //如果鼠标不在盒了区域则不执行后面的逻辑
  if (isOutside.value) {
    return
  }
  //横向
  if (elementX.value > 100 && elementX.value < 300) {
    left.value = elementX.value - 100
  }
  //纵向
  if (elementY.value > 100 && elementY.value < 300) {
    top.value = elementY.value - 100
  }
  //处理办界
  if (elementX.value > 300) {
    left.value = 200
  }
  if (elementX.value < 100) {
    left.value = 0
  }
  if (elementY.value > 300) {
    top.value = 200
  }
  if (elementY.value < 100) {
    top.value = 0
  }
  //控制大图
  positionX.value = -left.value * 2
  positionY.value = -top.value * 2
})

</script>
<style scoped lang="scss">
.goods_info_top_left {
  width: 480px;
  border: 1px solid #efefef;
  margin-right: 28px;
  float: left;
  box-sizing: border-box;

  .goods-image {
    width: 480px; // 确保这个宽度可以容纳 .large 和 .small
    height: 400px;
    position: relative;
    display: flex;

    .middle {
      width: 400px;
      height: 400px;
      background: #f5f5f5;
      img{
        width: 400px;
        height: 400px;

      }
    }

    .large {
      position: absolute;
      top: 0;
      left: 412px; // 这个值需要根据 .goods-image 的宽度来调整
      width: 400px; // 确保这个宽度与 .middle 的宽度一致
      height: 400px;
      z-index: 500;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      background-repeat: no-repeat;
      background-size: 400px 400px; // 保持背景图的比例
      background-color: #f8f8f8;
    }

    .layer {
      width: 200px;
      height: 200px;
      background: rgba(0, 0, 0, 0.2);
      position: absolute;
      cursor: move; // 添加可移动的鼠标指针样式
    }

    .small {
      width: auto; // 根据 li 的数量自动调整宽度
      margin-left: 2px; // 根据 .large 的宽度来调整

      li {
        width: 68px;
        height: 68px;
        margin-left: 5px;
        margin-bottom: 15px;
        cursor: pointer;
        float: left; // 让 li 元素水平排列
        &:hover,
        &.active {
          border: 2px solid $xtxColor;
        }
        img{
          width: 68px;
          height: 68px;
        }
      }
    }
  }
}
</style>